<template>
	<u-popup :show="visible" @close="onClose" :mode="popMode" round="20" closeable>
		<view :style="{width:popMode == 'bottom' ? '750rpx' : '600rpx'}">
			<view class="share-t">分享到</view>
			<view class="shareBox">
				<view class="share-item" v-for="(item,index) in list" :key="index" @click="share">
					<image :src="item.url" mode=""></image>
					<view>{{item.name}}</view>
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
	import shareFun from '../shareBox/js/share.js'
	export default {
		props: ['visible', 'modeType','title','summary','imageUrl','href','popMode'],
		model: {
			prop: "visible",
			event: "update",
		},
		data() {
			return {
				show: false,
				list: [{
						name: '微信好友',
						code: 'wx',
						url: require('../shareBox/static/img/icon-wx.png')
					},
					{
						name: '微信朋友圈',
						code: 'pyq',
						url: require('../shareBox/static/img/icon-pyq.png')
					},
					// {
					// 	name: 'QQ好友',
					// 	code: 'qq',
					// 	url: require('../shareBox/static/img/icon-qq.png')
					// }, {
					// 	name: 'QQ空间',
					// 	code: 'qzone',
					// 	url: require('../shareBox/static/img/icon-qz.png')
					// },
				]
			}
		},
		onLoad() {
			// #ifndef MP-WEIXIN
			this.list = [{
					name: '微信好友',
					code: 'wx',
					url: require('../shareBox/static/img/icon-wx.png')
				},
				{
					name: '微信朋友圈',
					code: 'pyq',
					url: require('../shareBox/static/img/icon-pyq.png')
				}
			]
			// #endif
		},
		methods: {
			onClose() {
				this.$emit('update', false);
			},
			share(code) {
				// code ：分享目标
				// href：分享链接
				// title：分享标题
				// summary：分享描述
				// imageUrl：分享的图片或者音频或者视频的地址
				// modeType：分享的形式，支持0，1,2,3，4某个值，0-图文，1-纯文本，2-纯图片，3-音乐，4-视频，必填
				let result = shareFun(code, this.href, this.title, this.summary, this.imageUrl, this.modeType)
				this.$emit('update', false);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.share-t {
		text-align: center;
		font-size: 32rpx;
		border-bottom: solid 2rpx $uni-border-color;
		padding: 30rpx 0;
	}

	.shareBox {
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 30rpx 0;

		.share-item {
			text-align: center;
			font-size: 28rpx;

			image {
				width: 80rpx;
				height: 80rpx;
				margin-bottom: 20rpx;
			}
		}
	}
</style>